<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../jquery-3.3.1.min.js"></script>
    <style>
        
    </style>
</head>
<body>
    <h1> JQ动画效果</h1>
    <hr>

    <center>
        <button id="hideBtn">隐藏</button>
        <button id="showBtn">显示</button>
        <button id="toggleBtn">切换</button>
        <button id="fadeBtn">指定透明度</button>

        <button id="animateBtn">自定义动画</button>
        <button id="stopBtn">停止</button>
        <button id="delayBtn">延迟</button>
    </center>

    <br>

    <div id="container">
        <div id="box">
            <img src="1.jpg">
        </div>
    </div>
    <script>
        //隐藏
        
        $('#hideBtn').click(function(){
            // $('#box').hide(); //瞬间隐藏

            // $('#box').hide('fast');// 快速隐藏
            
            // $('#box').hide('slow');//渐渐隐藏
            
            // $('#box').hide(5000);//给定时间隐藏
        
            // $('#box').slideUp(5000);//从上到下 高减到0
            
            $('#box').fadeOut(3000);//淡出 透明度减到0
        });


        //显示
        $('#showBtn').click(function(){
            // $('#box').show();//瞬间显示
            
            // $('#box').show(5000);//给定时间显示
        
            // $('#box').slideDown(5000);//下滑动:高减增加
            

            $('#box').fadeIn(3000);//淡入

        });

        //显示 隐藏  切换
        
        $('#toggleBtn').click(function(){
            // $('#box').toggle(1000);//宽高透明度
            // $('#box').toggle(2500);
            // $('#box').slideToggle(1000);//滑动
            $('#box').fadeToggle(1000);//淡入
        });


        //指定透明度
        
        $('#fadeBtn').click(function(){
            $('#box').fadeTo(3000,0.1);
        });


        //自定义动画
        
        $('#animateBtn').click(function(){
            $('#box img').animate({
                'width' : '600px',
                'height' : '1200px'
            },2000);
        });


        //停止
        $('#stopBtn').click(function(){
            $('#box img').stop();
        });

        //延时
        
        $('#delayBtn').click(function(){
            $('#box').hide(1000).delay(1000).show(1000);
        })
    </script>
</body>
</html>